<template>
	<codemirror
		v-model="mdvalue"
		:placeholder="editorPlaceholder"
		:style="{ height: editorHeight + 'px', minHeight: '300px' }"
		:autofocus="false"
		:indent-with-tab="true"
		:tabSize="tabSize"
		:extensions="extensions"
		:scrollbarStyle="null"
		:options="{
			readOnly: props.readOnly
		}"
	/>
</template>

<script setup>
import { Codemirror } from 'vue-codemirror'
import { vue } from '@codemirror/lang-vue'
import { sql } from '@codemirror/lang-sql'
import { javascript } from '@codemirror/lang-javascript'
import { defineEmits, ref, defineProps, computed } from 'vue'
import { oneDark } from '@codemirror/theme-one-dark'

const emit = defineEmits('update:modelValue')
const props = defineProps({
	modelValue: {
		type: String,
		default: ''
	},
	mode: {
		type: String,
		default: 'javascript'
	},
	readOnly: {
		type: Boolean,
		default: false
	},
	editorPlaceholder: {
		type: String,
		default: '请输入代码'
	},
	editorHeight: {
		type: String,
		default: 'auto'
	},
	tabSize: {
		type: Number,
		default: 2
	}
})
const mdvalue = computed({
	get() {
		return props.modelValue || ''
	},
	set(value) {
		emit('update:modelValue', value)
	}
})
const sqlCode = ref()
const language_type = () => {
	switch (props.mode) {
		case 'javascript':
			return javascript()
		case 'vue':
			return vue()
		case 'sql':
			return sql()
		default:
			return javascript()
	}
}
const extensions = [language_type(), oneDark]
</script>
